---
title: Palaute
image: /images/user-guide/emails/emails_header.png
---

<Frame>
  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
</Frame>

Ilmaisee etenemistä tai lähtölaskentaa ja siirtyy oikealta vasemmalle.

<Tabs>

<Tab title="Usage">

```jsx
import { ProgressBar } from "twenty-ui/feedback";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Ominaisuudet          | Tyyppi  | Kuvaus                                                                                                     | Oletus    |
| --------------------- | ------- | ---------------------------------------------------------------------------------------------------------- | --------- |
| kesto                 | numero  | Edistymispalkkianimaation kokonaiskesto millisekunteina                                                    | 3         |
| viive                 | numero  | Edistymispalkkianimaation aloitusviive millisekunteina                                                     | 0         |
| easing                | string  | Hidastustoiminto edistymispalkkianimaatiolle                                                               | easeInOut |
| barHeight             | numero  | Palkin korkeus pikseleinä                                                                                  | 24        |
| barColor              | string  | Palkin väri                                                                                                | gray80    |
| automaattinen aloitus | boolean | Jos `true`, edistymispalkkianimaatio käynnistyy automaattisesti, kun komponentti ladataan. | `tosi`    |

</Tab>
</Tabs>

## Pyöreä edistymispalkki

Ilmaisee tehtävän edistymistä, usein käytössä latausnäytöissä tai alueilla, joissa haluat tiedottaa käyttäjälle jatkuvista prosesseista.

<Tabs>

<Tab title="Usage">

```jsx
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
```

</Tab>

<Tab title="Props">

| Ominaisuudet | Tyyppi     | Kuvaus                                | Oletus       |
| ------------ | ---------- | ------------------------------------- | ------------ |
| koko         | numero     | The size of the circular progress bar | 50           |
| barWidth     | numero     | Edistymispalkkiviivan leveys          | 5            |
| barColor     | merkkijono | Edistymispalkin väri                  | nykyinenVäri |

</Tab>

</Tabs>
